<template>
  <div class="aside">
    <div class="aside-wrapper"
      style="height:calc(91vh);overflow-y:auto">
      <el-menu unique-opened :default-openeds="open" :default-active="initActive">
        <el-submenu v-for="item in MenuList" 
          :key="item.id"
          :index="item.index">
          <template slot="title">
            <i :class="item.icon"></i>{{item.menuTitle}}</template>
          <el-menu-item v-if="item.children"
            v-for="i in item.children"
            :key="i.id"
            :index="i.index">
            <router-link :to="i.url">
              <div  @click="changeRoute(i.index)">{{i.menuTitle}}</div>
            </router-link>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>

<script>
const MenuList = require("../data/aside.json");
export default {
  components: {},
  props: {},
  data() {
    return {
      MenuList,
      initActive:'1.1',
      open: ['1']
    };
  },
  watch: {},
  computed: {
  },
  methods: {
    changeRoute(initActive){
      sessionStorage.setItem('initActive',initActive)
    }
  },
  created() {
    this.initActive = sessionStorage.getItem("initActive");
  },
  mounted() {
    
  }
};
</script>
<style lang="scss" scoped>
.aside {
  .el-submenu {
    &.is-opened{
      background: #ecf5ff;
    }
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      padding:0;
      & > a {
        color: #303133;
        height: 40px;
        line-height: 40px;
        display: block;
      }
      &:hover > a {
        color: #fff;
      }
      &.is-active {
        background: #6d2377;
        & > a {
          color: #fff;
        }
      }
    }
  }
}
</style>